import QRCode from 'react-qr-code'
import { Button, Dialog } from 'tdesign-react'
import UpgradeIcon from './assets/upgrade.svg'
import HideIcon from './assets/hide.svg'
import BookIcon from './assets/book.svg'
import ShortcutIcon from './assets/shortcut.svg'
import LogoutIcon from './assets/logout.svg'
import { LogoWechatStrokeFilledIcon } from 'tdesign-icons-react'
import { useState } from 'react'
import logo from './assets/logo.svg'
// import {useWebsocket} from './hooks/useWebsocket.ts'

const URL = import.meta.env.VITE_H5_URL

export default function Start() {
  const token = localStorage.getItem('token')

  // const {sendMessage} = useWebsocket(token)

  const [visible, setVisible] = useState(false)
  const openShortcut = () => {
    window.ipcRenderer.invoke('open-shortcut')
  }

  return (
    <div className="bg-[#F5F6F7] h-screen w-screen flex items-center justify-center ">
      <div className="flex flex-col items-center justify-center w-[334px]">
        <div className="bg-white w-full shadow rounded-xl flex flex-col items-center justify-center pt-8 pb-9">

          <div className="flex flex-row gap-x-4 mb-6">
            <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#DF84FF] to-[#9B3EFE]"
                    style={{ border: 'none' }}>
              <img className="mr-1" src={UpgradeIcon}/>升级套餐
            </Button>
            <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#5FA9FF] to-[#0050FF]"
                    style={{ border: 'none' }}>
              <img className="mr-1" src={HideIcon}/>隐藏界面
            </Button>
          </div>

          <div className="w-[180px] h-[180px] rounded border border-gray-200 p-[14px]">
            <QRCode value={`${URL}?token=${token}`} size={152}/>
          </div>

          <div className="text-sm mt-4 mb-2 text-gray-400">
            <LogoWechatStrokeFilledIcon size={16} color="#28C445" className="mr-2"/>
            打开微信扫码
          </div>

          <p className="text-sm text-gray-900">选择好题型，再点「开始笔试」</p>
        </div>

        <div className="flex flex-row gap-x-4 mt-4">
          <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#8AE1D4] to-[#00BEB5]"
                  style={{ border: 'none' }}>
            <img className="mr-1" src={BookIcon}/>使用教程
          </Button>
          <Button className="w-[90px] !h-[36px] bg-linear-to-b from-[#FFB96B] to-[#FF771F]"
                  style={{ border: 'none' }} onClick={openShortcut}>
            <img className="mr-1" src={ShortcutIcon}/>快捷键
          </Button>
          <Button className="w-[104px] !h-[36px] bg-linear-to-b from-[#F56F84] to-[#E73C4C]"
                  style={{ border: 'none' }}>
            <img className="mr-1" src={LogoutIcon}/>退出登录
          </Button>
        </div>

      </div>

      <Dialog width={320} visible={visible} header={false} footer={false}>
        <div className="flex flex-col items-center justify-center">
          <img className="w-46 mb-8" src={logo} alt="logo"/>
          <p className="text-sm text-center text-black mb-8">当前未开始笔试，请先扫码并进入笔试间后才可以查看快捷键</p>
          <Button className="!bg-[#177BFF] !border-0" block onClick={() => setVisible(false)}>知道了</Button>
        </div>
      </Dialog>
    </div>
  )
}
